<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <span style="font-size: 15px; color: #7232dd; font-weight: bold"
        >按订单状态搜索：</span
      >
      <!-- 下拉选择框 -->
      <el-select v-model="selectId" clearable placeholder="请选择订单状态">
        <el-option label="待支付" value="待支付"></el-option>
        <el-option label="待派送" value="待派送"></el-option>
        <el-option label="派送中" value="派送中"></el-option>
        <el-option label="待评价" value="待评价"></el-option>
        <el-option label="已完成" value="已完成"></el-option>
      </el-select>
      <!-- 搜索按钮 -->
      <el-button  icon="el-icon-search" @click="searchFor"
        >搜索</el-button
      >
    </div>

    <!-- 分界线 -->
    <el-divider></el-divider>

    <!-- 内容展示区 -->
    <div class="order">
      <el-table :data="orderData.list" style="width: 100%" stripe>
        <!-- 订单编号 -->
        <el-table-column prop="id" label="订单号" width="200px" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.id }}</div>
          </template>
        </el-table-column>
        <!-- 客户名 -->
        <el-table-column
          prop="realname"
          label="客户名"
          width="200px"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.customer.realname }}</div>
          </template>
        </el-table-column>
        <!-- 订单金额-->
        <el-table-column
          prop="total"
          label="订单金额"
          width="200px"
          align="center"
        >
          <template slot-scope="scope">
            <div style="color: red; font-size: 13px">
              ￥{{ scope.row.total }}
            </div>
          </template>
        </el-table-column>
        <!-- 订单状态 -->
        <el-table-column
          prop="status"
          label="订单状态"
          width="200px"
          align="center"
          ><template slot-scope="scope">
            <!-- 已完成 -->
            <div v-if="scope.row.status == '已完成'">
              <el-tag type="success">已完成</el-tag>
            </div>
            <!-- 待支付 -->
            <div v-if="scope.row.status == '待支付'">
              <el-tag type="danger">待支付</el-tag>
            </div>
            <!-- 待派送 -->
            <div v-if="scope.row.status == '待派送'">
              <el-tag type="warning">待派送</el-tag>
            </div>
            <!-- 待评价 -->
            <div v-if="scope.row.status == '待评价'">
              <el-tag>待评价</el-tag>
            </div>
            <!-- 派送中 -->
            <div v-if="scope.row.status == '派送中'">
              <el-tag type="info" effect="plain">派送中</el-tag>
            </div>
            <!-- 待发货 -->
            <div v-if="scope.row.status == '待发货'">
              <el-tag type="info">待发货</el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- 下单时间 -->
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width=""
          align="center"
        >
          <template slot-scope="scope">
            {{ moment(scope.row.orderTime).format("YYYY-MM-DD :HH:mm:ss") }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="" label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goTo(scope.row.id)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
var moment = require("moment");
export default {
  // 组件名称
  name: "Demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // 下拉框测试数据
      value: "",
      // 订单状态
      status: "",
      //   分页数据
      page: 1,
      pageSize: 100,
      // 查询项
      selectId: "",
    };
  },
  // 计算属性
  computed: {
    // 声明辅助函数 获取state中的数据
    ...mapState("order", ["orderData"]),
  },

  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.searchOrederData();
    this.getOrederData();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */

  // 组件方法
  methods: {
    moment,
    // 引入Vuex中的方法
    ...mapActions("order", ["getOrderDataVuex"]),
    // 分页获取订单信息
    getOrederData() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.getOrderDataVuex(param);
    },
    // 通过订单状态查询订单信息
    searchFor() {
      // 重置当前的页数为1
      this.page = 1;
      // 刷新页面的数据
      this.searchOrederData();
    },
    searchOrederData() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        status: this.selectId,
      };
      this.getOrderDataVuex(param);
    },
    
    // 跳转订单详情页传递订单编号
    goTo(meg) {
      // console.log(data);
      this.$router.push({
        path: "/order/order/OrderDetails",
        query: { meg },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.order {
  margin-top: 10px;
  /* 设置表格区域的最大高度 */
  max-height: 550px;
  /* 处理超出内容区域的样式 */
  overflow: auto;
}
.header {
  padding-left: 15px;
}
/* 分页区样式 */
.page {
  position: fixed;
  right: 20px;
  bottom: 30px;
}
</style>
